<!--答题详情-->
<template>
    <div class="paperWrap">
        <div class="paperHeader">
            <h2 style="margin: 0 auto;text-align: center;margin:10px 0 20px">{{this.examName}}</h2>
            <p style="text-align: center;">
                <span style="margin-right:20px;"><img src="../../../assets/exam/time.png" alt=""
                        style="vertical-align:text-bottom;padding: 0 5px;" />考试时间:{{examInfo.startTime}} -
                    {{examInfo.endTime}}</span>
                <span style="margin-right:20px;">
                    <Icon type="md-person" :size="16" style="font-size: 16px; margin: -2px 4px 0 4px;" />
                    用户:{{currentUserName}}
                </span>
                <span style="margin-right:20px;"><img src="../../../assets/exam/totalScore.png" alt=""
                        style="vertical-align:text-bottom;padding: 0 5px;" />总分:{{examScore}}</span>
                <span v-if="userScore!=0"><img src="../../../assets/exam/score.png" alt=""
                        style="vertical-align:text-bottom;padding:0 5px;" />得分:<b><a>{{userScore}}</a></b></span>
                <!-- 不知道为什么，不加这个隐藏的Button，点评按钮就无法正常展示，不要去掉，谢谢 -->
                <Button v-show="false"></Button>
                <Button v-if="isRemark" style="margin-left:20px;" type="primary" :disabled="disabledRemark" size="small"
                    ghost @click="remarkModal = true">点评</Button>
            </p>
            <Divider />
        </div>
        <div class="paperContent">
            <div style="max-height:calc(100vh - 200px);overflow:auto;" ref="content">
                <QuestionList :data="examList" :isGrader="isGrader" :paperid="paperid" :userId="userId" :examid="examid"
                    :showGrade="true" @on-marking="marking" pattern="answer">
                </QuestionList>
            </div>
        </div>
        <Modal v-model="remarkModal" title="点评">
            <my-quill-editor v-model="content" ref="myQuillEditor"></my-quill-editor>
            <div slot="footer">
                <Button @click="remarkModal = false;">取消</Button>
                <Button @click="saveOrUpdateRemark" type="primary">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import $ from 'jquery'
    //import encryption from '@/libs/encryption.js'
    import usally from '@/mixin/usally'
    import { getPaperDetail, getRnak, saveOrUpdateRemark } from '@/api/exam'
    import QuestionList from '@/components/question-list'
    import MyQuillEditor from '@/components/my-quill-editor'
    export default {
        name: 'exam',
        components: { QuestionList, MyQuillEditor },
        mixins: [usally],
        props: ['examInfo', 'isGrader', 'currentUserName', 'isScrollTop', 'isRemark', 'disabledRemark'],
        data() {
            return {
                content: '',
                remarkModal: false,
                userId: '',
                paperid: '',
                examid: '',
                examObj: {
                    id: this.$route.query.id,
                    paperid: this.$route.query.paperid,
                    endTime: this.$route.query.time,
                    status: this.$route.query.status,
                },
                // 试卷分数
                examScore: 0,
                examName: '',
                // 试卷题
                examList: [],
                // 试卷答案
                result: {},
                // 学员成绩
                userScore: 0
            }
        },
        created() {
            // 获取用户id
            // let October = localStorage.getItem('October')
            // October = JSON.parse(encryption.SelfUseDecrypt(October))
            // this.userId = October.userId
        },
        mounted() {
        },
        destroyed() {

        },
        watch: {
            isScrollTop() {
                this.$nextTick(() => {
                    this.$refs.content.scrollTop = 0
                })
            },
            remarkModal(val) {
                if (!val) { // 关闭模态框清空富文本
                    this.$refs.myQuillEditor.reset()
                } else {
                    this.getUserAnswer(this.paperid, this.userId, this.examid)
                }
            },
        },
        methods: {
            saveOrUpdateRemark() {
                saveOrUpdateRemark(this.examid, this.userId, this.content).then(({ code, message }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    this.remarkModal = false
                    this.$Message.success('点评成功')
                    this.$emit('changeRemark')
                })
            },
            marking() {
                this.getUserAnswer(this.paperid, this.userId, this.examid)
                this.$emit('on-marking')
            },
            // 查看分数接口
            getRankList(examid, userid) {
                let _this = this;
                let params = {
                    userId: userid
                };
                getRnak(examid, params).then(res => {
                    if (res.code === 1) {
                        if (res.attribute.dataList.length > 0) {
                            _this.userScore = res.attribute.dataList[0].grade;
                        }
                    }
                })
            },
            // 试卷回显答案
            getRightAnswer(arr) {
                let showAnswer = arr.filter(item => item.isRight === 1);
                let show = showAnswer.map(item => item.description);
                let explanation = showAnswer.map(item => item.explanation);
                let ids = showAnswer.map(item => item.answerID)[0];
                return {
                    show: show.join('；'),
                    explanation: explanation.join('；'),
                    id: ids
                }
            },
            // 回显学员答案
            getUserAnswer(paperid, userId, examid) {
                this.paperid = paperid
                this.userId = userId
                this.examid = examid
                getPaperDetail(examid, userId)
                    .then(res => {
                        if (res.code === 1) {
                            let getData = res.data;
                            this.examName = getData.paperName
                            this.examScore = getData.scores
                            let grade = getData.grade
                            this.userScore = grade < 0 ? 0 : grade
                            this.content = getData.remark
                            let questionDto = getData.questionList || [];
                            questionDto.forEach(item => {
                                item._disabled = true;
                                item.answerResult = item.showRight;
                                item.explanation = item.description;
                                let questionType = item.questionType.toString();
                                if(item.userAnswer && item.userAnswer.replace)item.userAnswer = item.userAnswer.replace('18886', '').trim()
                                if(item.userAnswerList && item.userAnswerList.length > 0){
                                   let indexSp = item.userAnswerList.indexOf('18886')
                                    if(indexSp > -1){
                                        item.userAnswerList.splice(indexSp,1)
                                    }
                                }
                                if (questionType == '4') {
                                    item.modeCode = '6';//与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
                                } else if (questionType == '5') {
                                    item.modeCode = '4';//与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
                                } else if (questionType == '6') { // 6 是简答题
                                    item.modeCode = '5';//与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
                                } else {
                                    item.modeCode = questionType;
                                }
                                if (item.modeCode === '2') { // || item.modeCode === '5'
                                    item.userAnswer = item.userAnswer ? item.userAnswer.split(',') : [];
                                } else {
                                    item.userAnswer = item.userAnswer || '';
                                }
                            })
                            this.examList = questionDto;
                        } else {
                            this.$Message.error({
                                content: '试卷答案信息获取错误',
                                duration: 3,
                            })
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            // 多选题
            handleJudgeScore(val1, val2) {
                let arr = []
                if (val1.length > 0) {
                    for (let i = 0; i < val1.length; i++) {
                        if (val1[i].isRight === 1 || val1[i].isRight === '1') {
                            arr.push(val1[i].answerID)
                        }
                    }
                    if (JSON.stringify(arr) === JSON.stringify(val2)) {
                        return true
                    } else {
                        return false
                    }
                } else {
                    return false
                }
            },
            // 判断题的正确与否
            handleAnws(val1) {
                if (val1.length > 0) {
                    if (val1[0].showRight === '1' || val1[0].showRight === 1) {
                        return true
                    } else {
                        return false
                    }
                }
            },
            parseDescription(question) {
                if (!question.answers) {
                    return;
                }
                let description;
                description = question.title.replace(/\{\{.*?\}\}/g, `<span class='quesBlank' style='display:inline-block;min-width:40px;padding:0px 5px;outline:none;box-shadow:none;border:none;border-bottom:1px solid rgb(168,166,200);color:#2d8cf0'></span>`);
                let el = document.createElement("div");
                el.innerHTML = description;
                let answersEle = el.getElementsByClassName('quesBlank');
                Array.from(answersEle).forEach((ele, index) => {
                    answersEle[index].innerHTML = question.userAnswer[0] ? question.userAnswer[0].userAnswer : ' ';
                });
                return el.innerHTML;
            },
        },
    }
</script>
<style scoped>
    .paperContent {
        width: 970px;
        /* background: #ffffff; */
        height: auto;
        padding: 10px;
    }
</style>